<template>
    <div class="app-container">
      <div class="topform">
        <el-input style="width: 300px" clearable v-model="form.serchKeyword" placeholder="请输入搜索内容"
                  autocomplete="off"/>
        <el-button type="primary" style="margin-left: 10px" :loading="btnloading" @click="getlistdata(true)"
                   icon="el-icon-search">搜索
        </el-button>
        <el-button type="primary" @click="adddialog=true" icon="el-icon-circle-plus-outline">添加</el-button>
      </div>
      <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
                header-cell-class-name="tableheader">
        <el-table-column align="center" label="类型">
          <template slot-scope="scope">
            {{ scope.row.press_name }}
          </template>
        </el-table-column> 
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="openedit(scope.row)" icon="el-icon-edit">编辑</el-button>
            <el-button type="danger" @click="delbtn(scope.row)" icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          style="text-align: center"
          layout="prev, pager, next"
          small
          :current-page="form.page"
          :page-size="form.pagesize"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
      <el-dialog title="保存类型" :visible.sync="adddialog" width="35%">
        <el-form :model="addform" ref="addform" :rules="rule" label-width="100px">
          <el-form-item label="类型名称：" prop="press_name">
            <el-input clearable v-model="addform.press_name" autocomplete="off"/>
          </el-form-item>  
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addbtn">保存</el-button>
        </div>
      </el-dialog>  
    </div>
  </template>
  
  <script>  

  export default {
    data() {
      return {
        btnloading: false,  
        form: {
          serchKeyword: '',
          page: 1,
          pagesize: 20
        },
        addform: {
            book_press_id: '',
            press_name: '', 
        }, 
        rule: {
            press_name: [
            {required: true, message: '此项为必填项'},
          ], 
        },
        list: null,
        alllist: null,
        total: 0,
        listLoading: true,
        adddialog: false,
        editdialog: false,
        addicondia: false,
        editicondia: false
      };
    }, 
    created() { 
      this.getlistdata(); 
    },
    methods: {
      getlistdata(isquery) {
        this.listLoading = true;
        if (isquery === true) {
          this.form.page = 1
        }
        this.$post(this.$api + '/get_book_press_pagelist', {
          'serchKeyword': this.form.serchKeyword,
          'page': this.form.page,
          'pagesize': this.form.pagesize
        }, false, this)
          .then((res) => {
            this.listLoading = false;
            if (res.code === 0) {
              this.list = res.rows;
              this.total = res.total;
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
      }, 
      addbtn() {
        this.listLoading = true;
        this.$post(this.$api + '/add_book_press', this.addform)
          .then((res) => {
            this.listLoading = false;
            if (res.code === 0) {
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success'
              });
              this.adddialog = false;
              this.addform = {
                book_press_id: '',
                press_name: '', 
              };
              this.getlistdata(); 
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
      },
      openedit(item) {
            this.adddialog = true;
            for(var i in this.addform)
            { 
                 this.addform[i] = item[i];  
            } 
      }, 
      delbtn(item) {
        this.$confirm('确认删除？?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.listLoading = true;
          this.$get(this.$api + '/del_book_press', {
            'book_press_id': item.book_press_id
          })
            .then((res) => {
              this.listLoading = false;
              if (res.code === 0) {
                this.$notify({
                  title: '成功',
                  message: res.msg,
                  type: 'success'
                });
                this.getlistdata();
              } else {
                this.$notify({
                  title: '失败',
                  message: res.msg,
                  type: 'error'
                });
              }
            });
        })
      },
      handleSizeChange(v) {
        this.form.pagesize = v;
        this.getlistdata();
      },
      handleCurrentChange(v) {
        this.form.page = v;
        this.getlistdata();
      }
    }
  };
  </script>
  
  